<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="checkbox" id="all">全选
    <hr>
    <input type="checkbox" class="one">吃
    <input type="checkbox" class="one">喝
    <input type="checkbox" class="one">啦
    <input type="checkbox" class="one">撒
    <script>
        var all = document.querySelector("#all")
        var arr = document.querySelectorAll(".one")
        /* 
            1. 当全选一旦勾选了之后,那么其他的按钮都需要勾选
        */
        all.onclick = function () {
            //其他的都要选中
            for (var i = 0; i < arr.length; i++) {
                /* 让其他按钮的选中状态变成自己的选中状态 */
                arr[i].checked = this.checked
            }
        }
        /* 
            2. 点击其他的按钮,遍历这个数组
        */
        for (var i = 0; i < arr.length; i++) {
            arr[i].onclick = function () {
                //统计选中的个数
                var sum = 0;
                for (var j = 0; j < arr.length; j++) {
                    //统计选中的个数
                    if (arr[j].checked == true) {
                        sum++;
                    }
                }
                //全部都选中了
                /* if(sum == arr.length){
                    all.checked =  true;
                }else{
                    all.checked = false;
                } */


                // sum == arr.length ? all.checked =  true : all.checked = false;
                

                // all.checked = sum == arr.length ?  true :  false;


                all.checked = sum == arr.length
            }
        }
    </script>
</body>

</html>